<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no" />
    <title>获取云钻</title>
    <link rel="stylesheet" href="css/style.css">
	<link rel="stylesheet" href="css/index.css">
    <script src="js/flexible.js"></script>
</head>
<body>
	<div class="body">
		<div class="bg">
			<img src="image/bg.png" class="banner">
			<img src="image/icon.png" class="icon">
		</div>
		<div class="invite">
			<h3>我先送您1个云钻，赶快填写手机号领取!</h3>
			<div class="from">
				<input type="text" placeholder="请输入您的手机号" class="mobile">
				<img src="image/draw.png" class="commit">
			</div>
		</div>
		
		<!--弹出层-->
		<div class="layer">
			<div class="box">
				<img src="image/success.png" class="succ">
				<div class="congra">
					<p class="congra-title">恭喜您！</p>
					<p class="congra-title">免费获得一个云钻</p>
					<p class="congra-phone">已放入您<span class="iphone">135****8952</span>手机账号</p>
					<p class="congra-once">下载云上APP立刻到账</p>
					<p class="congra-remark">(下载APP后注册可免填邀请码)</p>
					<img src="image/down.png" class="down">
				</div>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript">
	var oCommit = document.querySelector('.commit'),
		oMobile = document.querySelector('.mobile'),
		oLayer = document.querySelector('.layer'),
		oDown = document.querySelector('.down');
		
	oCommit.onclick = function(){
		if(!checkMobile(oMobile.value)){
			oMobile.style.border = '1px solid red';
		}else{
			oLayer.style.display = 'block';
		}
	}
	
	//点击 弹出层背景 消失框
	oLayer.onclick = function(){
		this.style.display = 'none';
	}
	// 点击下载做出相应操作
	oDown.onclick = function(){
		window.location.href = '#';
	}
	
	// 验证手机号
	function checkMobile(str) {
	    var re = /^1[3|4|5|7|8][0-9]{9}$/;
	    if (re.test(str)) {
	        return true
	    } else {
	        return false
	    }
	}
</script>
</html>